<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script>
        function subForm() {
            $.ajax({
                url: '/callBackData', //请求的url
                type: 'post', //请求的方式
                data: '', //form表单里要提交的内容，里面的input等写上name就会提交，这是序列化
                error:function (data) {
                    alert('请求失败');
                },
                success:function (data) {
                    //alert(data[0].code);
                    var str1 = "";
                    //清空table中的html
                    $("#commandTable").html("");
                    for(var i = 0;i<data.length;i++){
                        str1 = "<tr>" +
                            "<td>"+data[i].code + "</td>" +
                            "<td>"+data[i].command + "</td>" +
                            "<td>"+data[i].sn + "</td>" +
                            "<td>"+data[i].data + "</td>" +
                            "</tr>";
                        $("#commandTable").append(str1);
                    }
                }
            });
        }
        function subClear() {
            $.ajax({
                 url:'/clearResult',
                type: 'get',
                data: '',
                error:function (data) {

                },
                success:function (data) {
                     alert("===>清除成功")
                    subForm();
                }
            });
        }
        function subResClear() {
            $.ajax({
                 url:'/clearQueue',
                type: 'get',
                data: '',
                error:function (data) {

                },
                success:function (data) {
                     alert("===>清除成功")
                }
            });
        }
    </script>
    <style >

        ::-webkit-scrollbar
        {
            width: 4px;
            height: 4px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #FFF;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb
        {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #AAA;
        }
    </style>
</head>
<body>
<h1>模板</h1>
<div style="margin-bottom: 20px">
    <button id="select" onclick="subForm()">查询</button>
    <button id="clear" style=" margin-left: 100px" onclick="subClear()">清除数据</button>
    <button id="clearRes" style=" margin-left: 100px" onclick="subResClear()">清除回传数据</button>
</div>

<div style="overflow-x: auto;overflow-y: auto; height: 400px ;scrollbar-base-color: aquamarine">
    <table  border="1" bgcolor="#f0ffff">
        <thead>
        <tr>
            <th>Command</th>
            <th>Code</th>
            <th>Data</th>
            <th>Time</th>
        </tr>
        </thead>
        <tbody  id="commandTable" >
        </tbody>
       <!-- <tbody  th:each="sqlEntity : ${list}">
        <tr>
            <td th:text="${sqlEntity.id}"></td>
            <td th:text="${sqlEntity.command}"></td>
            <td th:text="${sqlEntity.data}"></td>
            <td th:text="${sqlEntity.time}"></td>
        </tr>
        </tbody>-->
    </table>
</div>
</body>
</html>